<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Vue Login Page</title>  
    <!-- 引入 Vue.js -->  
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>  
    <style>  
        /* 添加一些样式 */  
        .container {  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            justify-content: center;  
            height: 100vh;  
        }  
        form {  
            display: flex;  
            flex-direction: column;  
        }  
        input {  
            margin-bottom: 10px;  
        }  
    </style>  
</head>  
<body>  
  
<div id="app" class="container">  
    <h1>Login</h1>  
    <form @submit.prevent="login">  
        <label for="username">Username:</label>  
        <input type="text" id="username" v-model="username" required>  
  
        <label for="password">Password:</label>  
        <input type="password" id="password" v-model="password" required>  
  
        <button type="submit">Login</button>  
    </form>  
</div>  
  
<script>  
    new Vue({  
        el: '#app',  
        data: {  
            username: '',  
            password: ''  
        },  
        methods: {  
            login() {  
                // 在这里，你可以添加登录逻辑，比如发送 AJAX 请求到服务器  
                // 这里只是简单地打印出用户名和密码  
                console.log('Logging in with username:', this.username, 'and password:', this.password);  
                // 如果登录成功，你可以重定向到另一个页面或显示一个消息  
            }  
        }  
    });  
</script>  
  
</body>  
</html>